html, body, #❤, #❤ > div {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#❤ {
  width: 100%;
}

.🚀 {
  margin: .5em 1em;
}

.board {
  display: grid;
}

.square {
  display: block;
  background: none;
  border: none;
  outline: 1px solid #ccc;
  margin: 0;
  padding: 0;
}

@media (max-width: 640px) {
  .board {
    width: 90vw;
    grid-template-columns: repeat(15, 6vw);
    grid-template-rows: repeat(15, 6vw);
  }
}

@media (max-width: 1200px) {
  .board {
    width:  600px;
    grid-template-columns: repeat(15, 40px);
    grid-template-rows: repeat(15, 40px);
  }
}

@media (min-width: 1200px) {
  .board {
    width: 750px;
    grid-template-columns: repeat(15, 50px);
    grid-template-rows: repeat(15, 50px);
  }
}